<template>
	<mescroll-uni :ref="'mescrollRef'+i" @init="mescrollInit" top="0" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
		<view class="list">
			<view class="card" v-for="(item,index) in dataList" :key="index" @click="linkToDetail(item.id,item.status)">
				<view class="card-hd">{{item.title}}</view>
				<view class="card-bd">
					<view class="item">
						<span class="item-t">供应商单位：</span>
						<span class="item-v u-line-1">{{item.supplierName}}</span>
					</view>
					<view class="item">
						<span class="item-t">要求供应时间：</span>
						<span class="item-v u-line-1">{{item.supplyTime}}</span>
					</view>
					<view class="item">
						<span class="item-t">计划浇筑部位：</span>
						<span class="item-v u-line-1">{{item.pourPartName}}</span>
					</view>
					<view class="item" v-for="(item1,index1) in item.cementOrderVos" :key="index1">
						<span class="item-t">{{item1.name || '待选择'}}：</span>
						<span class="item-v u-line-1">{{item1.budget || '0'}}m³</span>
					</view>
				</view>
				<view class="card-fd">
					<span>{{item.createTime}}</span>
					<span>来自：{{item.creatorDept}}-{{item.creatorName}}</span>
				</view>
				<view class="status primary" :class="[{'warning':item.status==11},{'success':item.status==9}]">{{item.status | statusTxt}}</view>
			</view>
		</view>
	</mescroll-uni>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	import config from "@/common/config.js"
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin],
		data(){
			return{
				dataList:[],
			}
		},
		props:{
			height: [Number,String], // mescroll的高度
			createTime:{
				type:Object,
				default:function(){
					return {
						createTimeStart:"",
						createTimeEnd:""
					}
				}
			}
		},
		filters:{
			statusTxt(val){
				return config.acceptStatus[val]
			}
		},
		methods: {
			//下拉刷新
			refresh(){
				this.dataList = [];
				this.mescroll.resetUpScroll()
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.$u.api.getOrderList({
					createTimeStart:this.createTime.createTimeStart,
					createTimeEnd:this.createTime.createTimeEnd,
					status:this.statusNum(this.index),
					current:page.num,
					size:page.size
				}).then(res => {
					if(res.code != 0){
						this.$u.toast(res.msg)
						return false
					}
					let curPageData = res.data.records; 
					let curPageLen = curPageData.length; 
					let totalSize = res.data.total;
					if(page.num == 1) this.dataList = [];
					this.dataList = this.dataList.concat(curPageData);
					this.mescroll.endBySize(curPageLen, totalSize); 
				})
			},
			//过滤状态值
			statusNum(val){
				switch(val){
					case 0:
						return "9,10,11"
						break;
					case 1:
						return "10"
						break;
					case 2:
						return "9"
						break;
					case 3:
						return "11"
						break;
				}
			},
			linkToDetail(id,status){
				let url = `/pages/accept/detail?id=${id}`
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		padding: 0 30rpx;
		.card{
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			position: relative;
			.card-hd{
				font-size: 34rpx;
				color:#28282C;
				font-weight: 600;
				margin-top: 5rpx;
				padding: 30rpx 24rpx 24rpx;
			}
			.card-bd{
				padding: 0 24rpx 8rpx;
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 16rpx;
					font-size: 28rpx;
					.item-t{
						color: #798188;
					}
					.item-v{
						color:#333;
						max-width: 400rpx;
					}
				}
			}
			.card-fd{
				display: flex;
				align-items: center;
				height: 80rpx;
				border-top: 1px solid rgba(212, 226, 237, 0.6);
				color: #A6B1BA;
				font-size: 24rpx;
				padding: 0 24rpx;
				span{
					margin-right: 16rpx;
				}
			}
			.status{
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 16rpx;
				height: 40rpx;
				border-radius: 0px 16rpx 0px 16rpx;
				font-size: 20rpx;
				right: 0;
				top: 0;
				&.primary{
					background: rgba(19, 120, 255, 0.1);
					color: #1378FF;
				}
				&.success{
					background: rgba(39, 183, 16, 0.1);
					color: #27B710;
				}
				&.error{
					background: rgba(243, 43, 43, 0.1);
					color: #F32B2B;
				}
				&.warning{
					background: rgba(243, 43, 43, 0.1);
					color: #F32B2B;
				}
				&.info{
					background: rgba(144, 147, 153,0.1);
					color: #909399;
				}
			}
		}
	}
</style>
